<template>
  <view class="container">
    <view class="car-model-wrapper">
      <ve-image class="img-bg" src="carinfo-bc" width="100%" height="100%" />
      <view class="car-model-name">{{ modelName }}</view>
    </view>
    <ve-calendar v-if='selDateVal' class="price-calendar" ref="calendarRef" :cellheader="false" :initTime="selDateVal">
      <template #cell-header="{ date }">
        <view class="calendar-toolbar">
          <view class="prev" v-if="!setMonthDisabled('prev-month', date)" @click="selectDate('prev-month')">
            <ve-icon name="prev" width="32" height="32" />
          </view>
          <view class="current">{{ dayjs(date).format('YYYY年MM月') }}</view>
          <view class="next" v-if="!setMonthDisabled('next-month', date)" @click="selectDate('next-month')">
            <ve-icon name="next" width="34" height="34" />
          </view>
        </view>
      </template>
      <template #cell-extra="{ date }">
        <div class="price-value">
          {{ getPriceContentPrice(date) ? `¥${getPriceContentPrice(date)}` : '' }}
        </div>
      </template>
    </ve-calendar>
  </view>
</template>

<script setup name="ShortOrderForm">
  import { ref } from 'vue'
  import { getPriceCalendarAPI } from '@/api/order/lOrder'
  import { onLoad } from '@dcloudio/uni-app'
  import dayjs from 'dayjs'

  const priceList = ref([])
  const getPriceContentPrice = (day) => {
    day = dayjs(day).format('YYYY-MM-DD')
    let findResult = priceList.value.find((item) => item.calendarDateStr == day)
    if (findResult) {
      let price = findResult.price
      return parseInt(price)
    } else {
      return ''
    }
  }
  const calendarRef = ref()
  const selectDate = (val) => {
    if (val == 'prev-month') {
      calendarRef.value.prevMonth()
    }
    if (val == 'next-month') {
      calendarRef.value.nextMonth()
    }
  }
  // 当前选中的日期，用于指定月份
  const selDateVal = ref('')
  // 当前月份
  const nowYear = ref(new Date().getFullYear())
  const nowMonth = ref(new Date().getMonth())
  // 处理 上下月是否可点击
  const setMonthDisabled = (type, date) => {
    const calendarYear = dayjs(date, 'YYYY 年 M 月', 'zh-cn').year()
    const calendarMonth = dayjs(date, 'YYYY 年 M 月', 'zh-cn').month()
    let _nowMonth = nowMonth.value
    let _calendarMonth = calendarYear > nowYear.value ? 12 + calendarMonth : calendarMonth
    // 仅展示 本月、下一月、下下月
    if (type == 'prev-month') {
      return _calendarMonth == _nowMonth
    } else {
      return _calendarMonth == _nowMonth + 2
    }
  }
  const modelName = ref('')
  onLoad((options) => {
    modelName.value = options.priceModelName
    let priceModelId = options.priceModelId
    let start = options.start
    // 获取价格日历信息
    const param = {
      priceModelId,
      calendarDateS: dayjs(start).startOf('month').format('YYYY-MM-DD HH:mm:ss'),
    }
    getPriceCalendarAPI(param).then((res) => {
      const result = res.result
      priceList.value = result
      selDateVal.value = result[0].calendarDate
      nowMonth.value = new Date(selDateVal.value).getMonth()
      nowYear.value = new Date(selDateVal.value).getFullYear()
    })
  })
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    background: #f7f8fa;
    padding: 0 24rpx;
  }
  .car-model-wrapper {
    margin: 24rpx 0;
    width: 702rpx;
    height: 168rpx;
    position: relative;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    .img-bg {
      position: absolute;
      left: 0;
      top: 0;
    }
    .car-model-name {
      width: 490rpx;
      font-size: 36rpx;
      font-weight: 600;
      color: #ffffff;
      line-height: 44rpx;
      position: relative;
    }
  }
  .calendar-toolbar {
    padding: 28rpx 0;
    position: relative;
    text-align: center;
    .current {
      font-size: 36rpx;
      font-weight: 500;
      color: #2d2727;
      line-height: 44rpx;
    }
    .prev,
    .next {
      width: 34rpx;
      height: 34rpx;
      position: absolute;
      top: 28rpx;
    }
    .prev {
      left: 18rpx;
    }
    .next {
      right: 18rpx;
    }
  }
  .price-value {
    color: #8491a8ff;
    font-weight: 400;
    font-size: 24rpx;
  }
</style>
